<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析面板</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f7f8fa;
        }

        .nav-bar {
            background: #fff;
            height: 50px;
            display: flex;
            align-items: center;
            padding: 0 16px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        .nav-bar h1 {
            font-size: 18px;
            margin-left: 16px;
        }

        .filter-section {
            background: #fff;
            padding: 12px 16px;
            margin: 12px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
        }

        select {
            padding: 8px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            width: 120px;
        }

        .data-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            padding: 16px;
        }

        .data-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
        }

        .data-card h3 {
            color: #606266;
            font-size: 14px;
        }

        .number {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin: 8px 0;
        }

        .trend {
            font-size: 12px;
            display: flex;
            align-items: center;
        }

        .trend.up {
            color: #67c23a;
        }

        .trend.down {
            color: #f56c6c;
        }

        .real-time-data {
            background: #fff;
            margin: 0 16px;
            padding: 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .real-time-data i {
            margin-right: 8px;
            color: #409eff;
        }

        .scroll-text {
            white-space: nowrap;
            animation: scroll 20s linear infinite;
        }

        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        .chart-container {
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 16px;
        }

        .chart {
            background: white;
            height: 300px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
        }

        @media screen and (max-width: 768px) {
            .data-cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                padding: 8px;
            }

            .chart {
                height: 250px;
            }
        }
    </style>
</head>
<body>
    <div class="nav-bar">
<!--        <i class="fas fa-arrow-left"></i>-->
        <h1>数据分析面板</h1>
    </div>

<!--    <div class="filter-section">-->
<!--        <select id="timeRange">-->
<!--            <option value="today">今日</option>-->
<!--            <option value="week">本周</option>-->
<!--            <option value="month">本月</option>-->
<!--        </select>-->
<!--    </div>-->

    <div class="data-cards">
        <div class="data-card">
            <h3>总用户数</h3>
            <p class="number">12,345</p>
            <p class="trend up">
                <i class="fas fa-arrow-up"></i>
                较昨日 +5.2%
            </p>
        </div>
        <div class="data-card">
            <h3>日活跃度</h3>
            <p class="number">3,456</p>
            <p class="trend up">
                <i class="fas fa-arrow-up"></i>
                较昨日 +3.8%
            </p>
        </div>
        <div class="data-card">
            <h3>转化率</h3>
            <p class="number">45.2%</p>
            <p class="trend down">
                <i class="fas fa-arrow-down"></i>
                较昨日 -2.1%
            </p>
        </div>
        <div class="data-card">
            <h3>平均停留</h3>
            <p class="number">8.5分钟</p>
            <p class="trend up">
                <i class="fas fa-arrow-up"></i>
                较昨日 +1.4%
            </p>
        </div>
    </div>

    <div class="real-time-data">
        <i class="fas fa-info-circle"></i>
        <div class="scroll-text">
            实时访问: {{ msg }}
        </div>
    </div>

    <div class="chart-container">
        <div id="userTrendChart" class="chart"></div>
        <div id="distributionChart" class="chart"></div>

    </div>
    <div class="chart-container">
        <div id="conversionChart" class="chart"></div>
        <div id="heiheiChart" class="chart"></div>
    </div>

    <script>
        // 初始化图表
        function initCharts() {
            // 用户趋势图
            const userTrendChart = echarts.init(document.getElementById('userTrendChart'));
            userTrendChart.setOption({
                title: { text: '用户增长趋势' },
                tooltip: { trigger: 'axis' },
                legend: { data: ['新增用户', '活跃用户'], top:10},
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
                },
                yAxis: { type: 'value' },
                series: [{
                    name: '新增用户',
                    type: 'line',
                    smooth: true,
                    data: [820, 932, 901, 934, 1290, 1330, 1520, 1600],
                    areaStyle: { opacity: 0.1 }
                }, {
                    name: '活跃用户',
                    type: 'line',
                    smooth: true,
                    data: [720, 832, 801, 834, 1190, 1230, 1420, 1500],
                    areaStyle: { opacity: 0.4 }
                }]
            });

            // 地区分布图
            const distributionChart = echarts.init(document.getElementById('distributionChart'));
            distributionChart.setOption({
                title: { text: '用户地区分布' },
                tooltip: { trigger: 'item' },
                series: [{
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '华东' },
                        { value: 735, name: '华北' },
                        { value: 580, name: '华南' },
                        { value: 484, name: '西北' },
                        { value: 300, name: '西南' }
                    ]
                }]
            });

            // 转化漏斗图
            const conversionChart = echarts.init(document.getElementById('conversionChart'));
            conversionChart.setOption( {
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      // Use axis to trigger tooltip
                      type: 'line' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                  },
                  legend: {top:30},
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis: {
                    type: 'value'
                  },
                  yAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  series: [
                    {
                      name: 'Direct',
                      type: 'bar',
                      stack: 'total',
                      label: {
                        show: true
                      },
                      emphasis: {
                        focus: 'series'
                      },
                      data: [320, 302, 301, 334, 390, 330, 320]
                    },
                    {
                      name: 'Mail Ad',
                      type: 'bar',
                      stack: 'total',
                      label: {
                        show: true
                      },
                      emphasis: {
                        focus: 'series'
                      },
                      data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                      name: 'Affiliate Ad',
                      type: 'bar',
                      stack: 'total',
                      label: {
                        show: true
                      },
                      emphasis: {
                        focus: 'series'
                      },
                      data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                      name: 'Video Ad',
                      type: 'bar',
                      stack: 'total',
                      label: {
                        show: true
                      },
                      emphasis: {
                        focus: 'series'
                      },
                      data: [150, 212, 201, 154, 190, 330, 410]
                    },
                    {
                      name: 'Search Engine',
                      type: 'bar',
                      stack: 'total',
                      label: {
                        show: true
                      },
                      emphasis: {
                        focus: 'series'
                      },
                      data: [820, 832, 901, 934, 1290, 1330, 1320]
                    }
                  ]
                });

            //嘿嘿
            const heiheiChart = echarts.init(document.getElementById('heiheiChart'));
            heiheiChart.setOption({
                 title: { text: '用户地区分布' },
                  grid: {
                    show: true
                  },
                  tooltip: {
                    show: true
                  },
                  xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLine: {
                      lineStyle: {
                        type: 'dashed'
                      }
                    }
                  },
                  yAxis: {
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dashed'
                      }
                    }
                  },
                  series: [
                    {
                      data: [120, 200, 150, 80, 70, 110, 130],
                      type: 'bar',
                      itemStyle: {
                        color: {
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            { offset: 0, color: '#4DD9A7' },
                            { offset: 0.5, color: '#80E4C0' },
                            { offset: 1, color: '#B6F1DD' }
                          ],
                          global: false
                        }
                      }
                    },
                    {
                      data: [120, 200, 150, 80, 70, 110, 130],
                      type: 'bar',
                      itemStyle: {
                        color: {
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            { offset: 0, color: '#5EADF3' },
                            { offset: 0.5, color: '#98CAF6' },
                            { offset: 1, color: '#C4E0F9' }
                          ]
                        }
                      }
                    }
                  ]
                });

            // 监听窗口大小变化，调整图表大小
            window.addEventListener('resize', () => {
                userTrendChart.resize();
                distributionChart.resize();
                conversionChart.resize();
            });
        }

        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', initCharts);
    </script>
</body>
</html>